import { Commit, createStore } from "vuex";
// import { testDate, testProps, ColumnProps, PostProps } from "@/testData";
import axios from "axios";

// 封装 get 请求
const getAndCommit = async (
  url: string,
  mutationName: string,
  commit: Commit
) => {
  // commit("setLoading", true);
  const { data } = await axios.get(url);
  commit(mutationName, data);
  // await new Promise((resolve) => setTimeout(resolve, 3000));
  // commit("setLoading", false);
};

// 封装 post 请求
const postAndCommit = async (
  url: string,
  mutationName: string,
  commit: Commit,
  payload: any
) => {
  const { data } = await axios.post(url, payload);
  commit(mutationName, data);
};

export interface UserProps {
  //当前是否登录
  isLogin: boolean;
  nickName?: string;
  _id?: string;
  column?: string; // 用户自己的专栏 ID
}

// 图片的描述
export interface ImageProps {
  _id?: string;
  url?: string;
  createdAt?: string;
}

export interface ColumnProps {
  //专栏列表
  _id: string;
  title: string; // 标题
  avatar?: ImageProps; // 头像
  description: string; // 描述
}

export interface PostProps {
  //文章列表
  _id?: string;
  title: string;
  excerpt?: string;
  content?: string; // 內容
  image?: ImageProps | string; // 图片
  createdAt?: string; // 发布时间
  column: string; // 文章 Id，因为你点开的那个文章要和你的文章Id做匹配
  author?: string;
}

// 声明错误
export interface GlobalErrorProps {
  status: boolean;
  message?: string;
}

export interface ResponseType<P = []> {
  code: number;
  msg: string;
  data: P;
}

// 如果想在其他页面使用的话，导出就可以了
export interface GolbalDataProps {
  colunms: ColumnProps[];
  posts: PostProps[];
  user: UserProps;
  loading: boolean;
  token: string;
  error: GlobalErrorProps;
}

export default createStore<GolbalDataProps>({
  state: {
    colunms: [],
    posts: [],
    user: { isLogin: false },
    loading: false,
    token: localStorage.getItem("token") || "",
    error: { status: false },
  },
  // Vuex 允许我们在 store 定义 'getter' (可以认为是 store 的计算属性)
  // getter 的返回值会根据他的依赖被缓存起来，且只有当他的依赖值发生了改变才会被重新计算
  getters: {
    // 定义完毕了，就可以在应用中使用这个 getter 了
    // Getter 会暴露为 store.getters 对象
    // biggerColumnLen(state) {
    //   return state.colunms.filter((c) => c._id > 2).length;
    // },
    // 当前跳转的专栏详情是否是我点击的专栏

    // 专栏详情
    getColumnById: (state) => (id: string) => {
      return state.colunms.find((c) => c._id === id);
    },
    // 文章列表
    getPostById: (state) => (cid: string) => {
      return state.posts.filter((post) => post.column === cid);
    },
  },
  mutations: {
    // 登录
    login(state, rawData) {
      // state.token = rawData.data.token;
      const { token } = rawData.data;
      state.token = token;
      localStorage.setItem("token", token);
      axios.defaults.headers.common.Authorization = `Bearer ${token}`;
      // state.user = { ...state.user, isLogin: true, nickName: "斯蒂芬·库里" };
    },

    logout(state) {
      (state.token = ""), localStorage.removeItem("token");
      delete axios.defaults.headers.common.Authorization;
    },

    // 获取用户信息
    fetchCurrentUser(state, rawData) {
      state.user = { isLogin: true, ...rawData.data };
    },

    // 新建文章
    createPost(state, newPost) {
      state.posts.push(newPost);
    },
    // 专栏列表
    fetchColumns(state, rawData) {
      state.colunms = rawData.data.list;
    },
    // 专栏详情
    fetchColumn(state, rawData) {
      state.colunms = [rawData.data];
    },
    // 文章列表
    fetchPosts(state, rwaData) {
      state.posts = rwaData.data.list;
    },
    // 控制 loading 显示和隐藏
    setLoading(state, status) {
      state.loading = status; // true 和 false 的值
    },
    // 消息错误提示
    setError(state, e: GlobalErrorProps) {
      state.error = e;
    },
  },
  // action 类似于 mutation
  // action 提交的是 mutation ，而不是直接改变状态
  actions: {
    // 专栏列表
    fetchColumns(context) {
      // axios.get("/columns").then((resp) => {
      //   context.commit("fetchColumns", resp.data);
      // });
      // const { data } = await axios.get("/columns");
      // context.commit("fetchColumns", data);
      getAndCommit("/columns", "fetchColumns", context.commit);
    },

    // 专栏详情
    fetchColumn({ commit }, cid) {
      // axios.get(`/columns/${cid}`).then((resp) => {
      //   commit("fetchColumn", resp.data);
      // });
      // const { data } = await axios.get(`/columns/${cid}`);
      // commit("fetchColumn", data);
      getAndCommit(`/columns/${cid}`, "fetchColumn", commit);
    },

    // 文章列表
    fetchPosts({ commit }, cid) {
      // axios.get(`/columns/${cid}/posts`).then((resp) => {
      //   commit("fetchPosts", resp.data);
      // });
      // const { data } = await axios.get(`/columns/${cid}/posts`);
      // commit("fetchPosts", data);
      getAndCommit(`/columns/${cid}/posts`, "fetchPosts", commit);
    },

    // 登录
    login({ commit }, payload) {
      return postAndCommit("/user/login", "login", commit, payload);
    },

    fetchCurrentUser({ commit }) {
      getAndCommit("/user/current", "fetchCurrentUser", commit);
    },
    loginAndFecth({ dispatch }, loginData) {
      return dispatch("login", loginData).then(() => {
        return dispatch("fetchCurrentUser");
      });
    },

    // 新建文章
    createPost({ commit }, payload) {
      return postAndCommit("/posts", "createPost", commit, payload);
    },
  },
  modules: {},
});
